<template>
    <div >
       <div class="PC">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="formInline.username" placeholder="请输入姓名" clearable />
                </el-form-item>
                
                <el-form-item label="手机号">
                    <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
                </el-form-item>

                <el-form-item label="部门">
                    <el-input v-model="formInline.department" placeholder="请输入部门" clearable />
                </el-form-item>
                
                <el-form-item>
                    <el-button style="background-color: #253963; color: #fff;" @click="onSubmit">查询</el-button>
                </el-form-item>
        </el-form>
       <el-button  style="margin: 30px 0;background-color: #253963; color: #fff;" @click="dialogVisible=true">添加员工</el-button>
        <el-table :data="tableData" style="width: 100%" :stripe="true" border="true" >
                <el-table-column prop="username" label="姓名"  >
                    <template #default="scope"  >
                        <div >{{ scope.row.username }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="工号"  />
                <el-table-column prop="department" label="部门" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="employeestype" label="岗位" />
            </el-table>
       </div>
       <div class="move" style="padding-top: 20px;">
        <el-form :inline="true" :model="formInline" style="width: 90vw; margin: 0 auto;">
                <el-form-item label="姓名">
                    <el-input v-model="formInline.username" placeholder="请输入姓名" clearable />
                </el-form-item>
                
                <el-form-item label="手机号">
                    <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
                </el-form-item>

                <el-form-item label="部门">
                    <el-input v-model="formInline.department" placeholder="请输入部门" clearable />
                </el-form-item>
                <br />
                <el-form-item>
                    <el-button style="background-color: #253963; color: #fff;" @click="onSubmit">查询</el-button>
                    <el-button  style="margin-left:30px;background-color: #253963; color: #fff;" @click="dialogVisible=true">添加员工</el-button>
                </el-form-item>
        </el-form>

        <el-card style="max-width: 90vw;margin: 0 auto;margin-top: 10px; font-size: 14px;" v-for="item in tableData">
            <p>姓名：<span style="color: #bbb9b7;">{{ item.username }}</span></p>
            <p>工号：<span style="color: #bbb9b7;">{{ item.id }}</span></p>
            <p>部门：<span style="color: #bbb9b7;">{{ item.department }}</span></p>
            <p>手机号：<span style="color: #bbb9b7;">{{ item.phone }}</span></p>
            <p>岗位：<span style="color: #bbb9b7;">{{ item.employeestype }}</span></p>
        </el-card>

       </div>

    </div>
    <Add :data="formInline" title="添加员工" :dialogVisible="dialogVisible" @change="colseAdd" @tijiao="Addyuan" />
</template>

<script setup lang="ts">
import {reactive,ref,onMounted,watch} from 'vue'
import {ElMessage} from 'element-plus'
import Add from '../components/Add.vue'
import { getAllUsers, queryUserByMultiConditions,addTable } from '../utils/api';
const dialogVisible = ref(false)
const tableData=ref()
const getData = async()=>{tableData.value =await getAllUsers()}
onMounted(()=>{
    getData()
})

interface formInlineTS{
    username:string,
    phone:string,
    department:string
}
const formInline: formInlineTS = reactive({
    username:'',
    phone:'',
    department:'',
})

const onSubmit = async () => {
    tableData.value=await queryUserByMultiConditions(formInline)
}
const colseAdd=(val:boolean)=>{
    dialogVisible.value=val
}

const Addyuan = async (val: addFormInlineTS) => {
  
  try {
    const data= await addTable(val);
    ElMessage.success('添加成功');
    dialogVisible.value = false;
    tableData.value = await getAllUsers();
  } catch (error:any) {
    // 打印后端返回的具体错误信息
    if (error.response?.data) {
      ElMessage.error(`添加失败：${error.response.data.message}`);
    } else {
      ElMessage.error('添加失败，请检查必填字段');
    }
    console.error('后端错误:', error.response);
  }
};

</script>

<style scoped>
@media (max-width:1000px) {
  .PC{
    display: none;
  }
  .move{
    display: block;
  }
}
@media (min-width:1000px) {
  .PC{
    display: block;
  }
  .move{
    display: none;
  }
}

.demo-form-inline{
    margin-top: 30px;
}
</style>